<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col :span="8">
        <!-- 设备基本信息 -->
        <UserDeviceCardInfo :sn="sn" />

        <!-- 设备地图 -->
        <UserDeviceLocation class="mt-3" :sn="sn" />
      </el-col>

      <!-- 右侧参数信息 -->
      <el-col :span="16">
        <UserDeviceLogs :sn="sn" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import UserDeviceCardInfo from "@/components/UserDeviceCardInfo/UserDeviceCardInfo.vue";
import UserDeviceLocation from "@/components/UserDeviceLocation/UserDeviceLocation.vue";
import UserDeviceLogs from "@/components/UserDeviceLogs/UserDeviceLogs.vue";

defineOptions({
  name: "DeviceSituationDetail",
});

const route = useRoute();
const sn = computed(() => {
  return (route.query.sn as string) || undefined;
});
</script>

<style lang="scss" scoped></style>
